<template>
  <view class="register-page">
    <view >
		<image class="logo" src="../../static/login_logo3.jpg" mode=""></image>
	</view>
    <input class="input" type="text"  placeholder-class="placeholderStyle" v-model="account" placeholder="请输入用户名" />
    <input class="input" type="password" placeholder-class="placeholderStyle" v-model="password" placeholder="请输入密码" />
    <!-- <input class="input" type="text" v-model="verificationCode" placeholder="请输入验证码" />
    <button class="get-code" @click="getCode">获取验证码</button>
    <view class="agreement">
      <checkbox class="checkbox" v-model="checked">我已阅读并同意</checkbox>
      <text class="link">注册协议</text>
    </view> -->
    <button class="register-btn" @click="register">注册</button>
	<u-toast ref="registerErr" />
  </view>
</template>

<script>
	import {encrypt} from "../../utils/jsencrypt.js" ;
	import {baseUrl} from "../../utils/request.js" ;
  export default {
    data() {
      return {
        account: '',
        password: '',
        verificationCode: '',
        checked: false
      }
    },
    methods: {
      getCode() {
        // 在这里实现获取验证码逻辑
      },
	  showToast(msg) {
	  				this.$refs.registerErr.show({
	  					title: msg,
	  					type: 'error',
	  					url: '/pages/user/index'
	  				})
	  			},
      register() {
        // 在这里实现注册逻辑
		uni.request({
		    // url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/shop',
			method:"POST",
		    url: baseUrl+'/mixuebingcheng/user/wxRegister',
					  data:{name:this.account,password:encrypt(this.password)},
		    success: (res) => {
		        console.log(res);
				if(res.data.code==200)
					uni.navigateTo({
						url: '/pages/login/login'
					});
				else
					this.showToast(res.data.msg)
		    }
		});
      }
    }
  }
</script>

<style>
	.placeholderStyle{
		color: #fff;
	}
  .register-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* background-color: #f0f0f0; */
	background-color: #e70012;
  }

  .logo {
    width: 100px;
    height: 100px;
    background-color: #333;
  }

  .input {
    width: 200px;
    height: 40px;
    margin-top: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
	border: 1px solid #fff;
	color: #fff;
  }

  .get-code {
    width: 200px;
    height: 40px;
    margin-top: 10px;
    background-color: #f60;
    color: #fff;
    border-radius: 4px;
  }

  .agreement {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .checkbox {
    margin-right: 5px;
  }

  .link {
    color: #f60;
  }

  .register-btn {
    width: 200px;
    height: 40px;
    margin-top: 20px;
    background-color: #333;
    color: #fff;
	border: 1px solid #fff;
    border-radius: 4px;
  }
</style>